<template>
    <div id="nav">
        <img src="./assets/logo.png"><br>
        <router-link to="/" active-class="active">Home</router-link>
        <router-link to="/about" active-class="active">About</router-link>
        <router-link :to="`/user/${userId}`" active-class="active">
            用户
        </router-link>
    </div>
    <router-view/>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
export default {
    setup () {
        const state = reactive({
            userId: 'lb' + Math.floor(Math.random() * 10)
        })
        const router = useRouter()
        const homeClick = () => {
            router.push('/about')
        }

        return {
            ...toRefs(state),
            homeClick
        }
    }
}
</script>

<style scoped>
    #nav {
        text-align: center;
    }
    .active {
        color: #f00;
    }
</style>
